<script setup lang="ts">
import { defineComponent, reactive, ref, h, computed } from 'vue'
import {
  type User,
  type Product,
  BaseClass,
  DerivedClass,
  type Status,
  type AdminUser,
  UserRole,
  type Callback,
} from './types'
import { button, input } from '../../dsl/LayoutDSL'
import { type SizeType, type ButtonType, type InputType } from '../../dsl/DslType'
import RecursiveComponent from './RecursiveComponent.vue'
defineComponent({ name: 'ExampleComponent' })
// User 类型示例
const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com',
  age: 30,
}

// Product 接口示例
const product: Product = {
  id: 'p001',
  name: 'Laptop',
  price: 999.99,
  inStock: true,
  greet: (): string => {
    return 'Hello World'
  },
}

const baseClass = new BaseClass(1, '王小明')
const derivedClass = new DerivedClass(1, '王小明', 18)

// 联合类型示例
const status: Status = 'active'

// 交叉类型示例
const adminUser: AdminUser = {
  ...user,
  isAdmin: true,
  permissions: ['read', 'write'],
}

// 枚举示例
const userRole: UserRole = UserRole.Admin

const callbackValue = ref('')
// 类型别名示例
const callback: Callback = (data) => {
  callbackValue.value = data
}
//type ButtonData = { size: SizeType; type: ButtonType }
type InputData = { size: SizeType; type: InputType; value: string }
const inputObj = reactive<InputData>({ size: 'large', type: 'button', value: 'Hello World' })
//const buttonObj: ButtonData = { size: 'large', type: 'primary' }
//const dsl = button().size(buttonObj.size).type(buttonObj.type).build()
const dslObj = reactive({ text: 'dslObj' })

const inputObjFun = (e: Event) => {
  console.log('inputObjFun')
  inputObj.value = 'mouseenterFun' + e.target
  dslObj.text = 'mouseenterFun' + e.target
}
const mouseleaveFun = (e: Event) => {
  console.log('mouseleaveFun')
  inputObj.value = 'mouseleaveFun' + e.target
  dslObj.text = 'mouseleaveFun' + e.target
}
const dsl = input()
  .size(inputObj.size)
  .type(inputObj.type)
  .placeholder('placeholder')
  .modelValue(inputObj.value)
  .on('mouseenter', inputObjFun)
  .on('mouseleave', mouseleaveFun)
  .build()

const BoundComponent = h('input', {
  value: dslObj.text,
  onInput: (e: Event) => {
    dslObj.text = e.target.text
  },
})
</script>
<template>
  <el-row :gutter="24">
    <el-col :span="6">
      <el-card shadow="hover">
        <template #header>
          <el-text>类型示例</el-text>
        </template>
        <el-text>ID: {{ user.id }} </el-text>
        <el-text>Name: {{ user.name }} </el-text>
        <el-text v-if="user.age">Age: {{ user.age }} </el-text>
        <el-text>Email: {{ user.email }} </el-text>
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card>
        <template #header>
          <el-text>接口示例</el-text>
        </template>
        <el-text>{{ product.greet() }} </el-text>
        <el-text>{{ product.greet() }} </el-text>
        <el-text>ID: {{ product.id }} </el-text>
        <el-text>Name: {{ product.name }} </el-text>
        <el-text>Price: {{ product.price }} </el-text>
        <el-text>In Stock: {{ product.inStock ? 'Yes' : 'No' }} </el-text>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" class="example-card">
        <template #header>
          <el-text>基础Class示例</el-text>
        </template>
        <el-text type="primary" size="large">Base Class</el-text>
        <el-text>name: {{ baseClass.name }}</el-text>
        <el-text>id: {{ baseClass.id }}</el-text>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" class="example-card">
        <template #header>
          <el-text>类对象继承</el-text>
        </template>
        <el-text>name: {{ derivedClass.name }}</el-text>
        <el-text>id: {{ derivedClass.id }}</el-text>
        <el-text>age: {{ derivedClass.age ? 'Yes' : 'No' }}</el-text>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" class="example-card">
        <template #header>
          <el-text>联合类型示例</el-text>
        </template>
        <el-text>Status: {{ status }}</el-text>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" class="example-card">
        <template #header>
          <el-text>交叉类型示例</el-text>
        </template>
        <el-text>Admin User ID: {{ adminUser.id }}</el-text>
        <el-text>Admin Permissions: {{ adminUser.permissions.join(', ') }}</el-text>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" class="example-card">
        <template #header>
          <el-text>枚举示例</el-text>
        </template>
        <el-text>User Role: {{ userRole }}</el-text>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" class="example-card">
        <template #header>
          <el-text>类型别名示例</el-text>
        </template>
        <el-button type="primary" @click="callback('Hello from callback!')">
          Trigger Callback
        </el-button>
        {{ callbackValue }}
      </el-card>
    </el-col>
    <el-col :span="6">
      <RecursiveComponent :com="dsl"></RecursiveComponent>
      <component :is="BoundComponent"></component>
    </el-col>
  </el-row>
</template>

<style scoped>
div {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 10px;
}
h2 {
  color: #333;
}
p {
  margin: 5px 0;
}
</style>
